<template>
    <div>
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
  <el-breadcrumb-item>角色列表</el-breadcrumb-item>
</el-breadcrumb><br/><br/>

 <el-alert title="添加商品信息" type="info" center show-icon></el-alert><br/>
 <el-steps :active="Number(active-0)" align-center finish-status="success">
  <el-step title="基本信息"></el-step>
  <el-step title="商品参数"></el-step>
  <el-step title="商品属性"></el-step>
  <el-step title="商品图片"></el-step>
  <el-step title="商品内容"></el-step>
  <el-step title="完成"></el-step>
</el-steps><br/>

<el-tabs :tab-position="tabPosition='left'" :before-leave='tab' style="height: 600px;" v-model="active" @tab-click="tabclick">
    <el-tab-pane label="基本信息" name="0">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="商品名称">
             <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格(元)">
             <el-input v-model="form.price"></el-input>
          </el-form-item>
          <el-form-item label="活动重量">
             <el-input v-model="form.weight"></el-input>
          </el-form-item>
          <el-form-item label="商品数量">
             <el-input v-model="form.number"></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
          <el-cascader style='float:left'
            v-model="form.cat"
            :options="cate"
            :props="{ value: 'cat_id',label:'cat_name',children: 'children' }">
          </el-cascader>
          {{form.cat}}
          </el-form-item>
       </el-form>
    </el-tab-pane>
    <el-tab-pane label="商品参数" name="1">
        <span v-for='(item,index) in manyList' :key="index">
          <p>{{item.attr_name}}</p>
          <el-checkbox-group v-model="item.newValue">
            <el-checkbox v-for="(ite,ind) in item.attr_vals" :key="ind" 
              style="margin-right:10px;" v-model="item.checked" :label="ite" border></el-checkbox>
          </el-checkbox-group>
        </span>
    </el-tab-pane>
    <el-tab-pane label="商品属性" name="2">
        <span v-for='(item,index) in onlyList' :key="index">
         <p>{{item.attr_name}}</p>
          <el-checkbox-group v-model="item.newValue">
            <el-checkbox v-for="(ite,ind) in item.attr_vals" :key="ind" 
              style="margin-right:10px;" v-model="item.checked" :label="ite" border></el-checkbox>
          </el-checkbox-group>
        </span>
    </el-tab-pane>
    <el-tab-pane label="商品图片" name="3">
          <el-upload
  :action="imgURl"
  :headers='headersObj'
  :on-preview="previewImg"
  :on-remove="removeImg"
  :on-success='successImge'
  multiple
  >
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>
    </el-tab-pane>
    <el-tab-pane label="商品内容" name="4">
    </el-tab-pane>
  </el-tabs>
  <el-dialog title="图片预览" :visible.sync="picshow" width="50%">
      <img :src="previewPath" alt="" class="previewImg" />
    </el-dialog>
    
    </div>
</template>

<script>
import { categories, goodcategories } from "../api/api.js";
export default {
  data() {
    return {
      active: "0",
      cate: [],
      value: "",
      manyList: [],
      onlyList: [],
      form: {
        name: "",
        price: "",
        weight: "",
        number: "",
        cat: [],
        pics: [],
        attrs: []
      },
      imgURl: "https://lianghj.top:8888/api/private/v1/upload",
      headersObj: {
        Authorization: localStorage.getItem("token")
      },
      previewPath: "", //预览
      picshow: false //显示预览的图片
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await categories();
      console.log(res);
      this.cate = res.data;
    },
    async tabclick() {
      let cateId = this.form.cat[this.form.cat.length - 1];
      console.log("点击第几个", cateId);
      if (this.active == 1) {
        let res = await goodcategories(cateId, "many");
        console.log("qwe", res);
        res.data.forEach(item => {
          item.attr_vals = item.attr_vals.split(",");
          //绑定老数据有问题-可以深拷贝
          item.newValue = JSON.parse(JSON.stringify(item.attr_vals));
        });
        this.manyList = res.data;
      }
      if (this.active == 2) {
        let res = await goodcategories(cateId, "only");
        console.log("qwe", res);
        res.data.forEach(item => {
          item.attr_vals = item.attr_vals.split(",");
          //绑定老数据有问题-可以深拷贝
          item.newValue = JSON.parse(JSON.stringify(item.attr_vals));
        });
        this.onlyList = res.data;
      }
    },
    tab(newValue,oldValue){
          console.log('xxx',newValue,oldValue)
          if(oldValue==0 && this.form.cat.length != 3)
          this.$message.error("请先选择父级分类3级")
    },
    successImge(file) {
      console.log("lll", file);
      let path = file.data.tmp_path;
      this.form.pics.push({ "pic": path });
    },
    removeImg(file) {
      console.log("删除", file);
      let delPath=file.response.data.tmp_path
      let index=this.form.pics.findIndex(item=>{item.pic==delPath})
      this.form.pics.splice(index,1)
      console.log('删除后的数组中的值',this.form.pics)
    },
    previewImg(file) {
      console.log('查看图片信息',file)
      let preURL=file.response.data.url
      this.previewPath=preURL
      this.picshow=true
    }
  }
};
</script>

<style lang='scss' scoped >
.previewImg{
  width: 100%;
}
</style>
